/* Start Travel Category css
============================================================================================ */

.travel_category {
    padding: 150px 0 120px;
    @media(max-width: 1024px) {
        padding: 100px 0 70px;
    }
    @media(max-width: 991px) {
        padding: 60px 0 30px;
    }
    .container-fluid {
        position: relative;
        padding-left: 20%;
        padding-right: 0;
        @media(max-width: 991px) {
            padding-left: 18%;
        }
        @media(max-width: 576px) {
            padding-left: 11%;
        }
        &:after {
            content: '';
            position: absolute;
            top: 120px;
            right: 25%;
            bottom: -53px;
            left: 0;
            background: #f1f9ff;
            z-index: -1;
        }
    }
    .owl-stage {
        padding-left: 0 !important
    }
    .owl-dots {
        text-align: center;
        margin-top: 17px;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        @media(max-width: 992px) {
            margin-top: 30px;
        }
        @media(max-width:768px) {
            display: none !important;
        }
    }
    .owl-dot {
        position: relative;
        height: 2px;
        width: 50px;
        display: inline-block;
        background: rgba(127, 127, 127, 0.5);
        @include transition();
    }
    .owl-dot.active {
        height: 6px;
        top: 2px;
        @include transition;
        background: $baseColor;
        border-radius: 7px;
    }
}

.single_travel {
    position: relative;
    margin-bottom: 30px;
    &.mt--60 {
        @media (max-width: 1440px) {
            margin-top: -37px;
        }
        @media (max-width: 1300px) {
            margin-top: -30px;
        }
        @media (max-width: 1024px) {
            margin-top: -20px;
        }
        @media (max-width: 991px) {
            margin-top: 0px;
        }
    }
    .overlay {
        background: $black;
        opacity: .3;
    }
    figure {
        overflow: hidden;
        img {
            @include transition();
        }
    }
    a {
        color: #ffffff;
        &:hover {
            opacity: .7;
        }
    }
    .text-wrap {
        width: 100%;
        padding: 0 40px;
        position: absolute;
        bottom: 80px;
        @media (max-width: 1440px) {
            padding: 0 20px;
        }
        h3 {
            font-size: 30px;
            margin-bottom: 10px;
            @media (max-width: 1199px) and (min-width: 992px) {
                font-size: 20px;
            }
            @media (max-width: 576px) {
                font-size: 20px;
            }
        }
    }
    &:hover {
        img {
            @include transform(scale(1.3) rotate(-10deg));
        }
    }
}

/* End Travel Category css
============================================================================================ */

/* Start Latest Blog Post css
============================================================================================ */

.latest_blog_post {
    padding: 120px 0;
    @media(max-width: 1024px) {
        padding: 70px 0;
    }
    @media(max-width: 991px) {
        padding: 80px 0;
    }
    .container-fluid {
        position: relative;
        padding-left: 20%;
        padding-right: 20%;
        @media(max-width: 991px) {
            padding-left: 16%;
            padding-right: 16%;
        }
        @media(max-width: 576px) {
            padding-left: 6%;
            padding-right: 6%;
        }
        &:after {
            content: '';
            position: absolute;
            top: 120px;
            right: 0;
            bottom: -57px;
            left: 25%;
            background: #f1f9ff;
            z-index: -1;
        }
    }
    .single_travel {
        .text-wrap {
            padding: 0 30px;
            bottom: 30px;
            @media (max-width: 1440px) {
                padding: 0 10px;
            }
        }
        h3 {
            font-size: 24px;
        }
    }
}

/* End Latest Blog Post css
============================================================================================ */

/* Start Different Places css
============================================================================================ */

.different_places {
    padding: 120px 0;
    @media(max-width: 1199px) {
        padding: 70px 0;
    }
    @media(max-width: 991px) {
        padding: 40px 0;
    }
    .container-fluid {
        padding: 0;
        overflow: hidden;
        @media(max-width: 991px) {
            padding: 0 15px;
        }
    }
}

.single_place {
    position: relative;
    margin-bottom: 30px;
    &.mt-480 {
        @media (max-width: 1199px) {
            margin-top: 300px;
        }
        @media (max-width: 767px) {
            margin-top: 0px;
        }
    }
    &.mt-240 {
        @media (max-width: 991px) {
            margin-top: 0px;
        }
    }
    .overlay {
        background: $black;
        opacity: .3;
    }
    h4 {
        color: #ffffff;
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%))
    }
}

/* End Different Places css
============================================================================================ */

/* Start Popular Post css
============================================================================================ */

.popular_post {
    padding-bottom: 120px;
    @media(max-width: 1024px) {
        padding-bottom: 70px;
    }
    @media(max-width: 991px) {
        padding-bottom: 40px;
    }
    .meta {
        @media (max-width: 1199px) {
            display: block;
        }
    }
}

.single-popular-post {
    background: #f1f9ff;
    margin-bottom: 30px;
    @include transition();
    .desc {
        width: 100%;
        margin-left: 20px;
        @media(max-width: 576px) {
            margin-left: 8px;
        }
    }
    h4 {
        font-size: 16px;
        margin-bottom: 5px;
        a {
            color: $black;
        }
    }
    &:hover {
        background: #ffffff;
        box-shadow: -10px 10px 30px rgba(153, 153, 153, 0.2);
    }
}

/* End Popular Post css
============================================================================================ */
/* Start Category css
============================================================================================ */
.archive_area, .category_area {
    .single_travel {
        .text-wrap {
            bottom: 30px;
            @media (max-width: 320px) {
                bottom: 20px;
            }
            h3 {
                font-size: 24px;
            }
        }
    }
}
/* End Category css
============================================================================================ */